<template>
  <div class="scroll-wrapper"
  @scroll="hScroll"
  ref="refsScroll"
  >
    <!-- {{channel}}频道的文章信息列表组件 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <van-cell v-for="(item, index) in list"
        :key="index"
        :title="item.title"
        @click="$router.push('/article/' + item.art_id.toString())"
        >
            <div slot="label">
                <!-- 图片 当前文章有几张图，就用几个宫格 -->
                <van-grid :column-num="item.cover.images.length">
                    <van-grid-item v-for="(img,idx) in item.cover.images" :key="idx">
                    <van-image lazy-load :src="img" @click.stop="hImage"/>
                    </van-grid-item>
                </van-grid>
                <!-- 文字说明 -->
                <div class="meta">
                    <span>{{item.aut_name}}</span>
                    <span>{{item.comm_count}}评论</span>
                    <span>{{item.pubdate | relTime}}</span>
                    <span class="close" @click.stop="hClose(item)">
                      <van-icon name="cross" v-if="$store.state.tokenInfo.token"/>
                    </span>
                </div>
            </div>
        </van-cell>
        <!-- <p
        v-for="index in 20"
        :key="index"
        >
        第{{index}}篇文章
        </p> -->
        </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import { getArticles } from '@/api/article'
export default {
  name: 'ArticleList',
  props: ['channel'],
  data () {
    return {
      list: [], // 文章列表，每一项就是一篇文章
      loading: false, // 是否为加载
      finished: false, // 是否所有的数据全部加载完成
      timestamp: null,
      isLoading: false // 是否是下拉刷新中...
    }
  },
  activated () {
    if (this.scrollTop) {
      this.$refs.refsScroll.scrollTop = this.scrollTop
    }
  },
  deactivated () {},
  created () {
    console.log(111)
    // 监听eventBus
    this.$eventBus.$on('delArticle', (obj) => {
      console.log('我这里是', this.channel, '收到了事件qhjpl', obj)
      const { articleId, channelId } = obj
      if (channelId !== this.channel.id) {
        console.log('你要删除的文章不是我这个')
        return
      }
      const index = this.list.findIndex(article => {
        return article.art_id.toString() === articleId
      })
      if (index !== -1) {
        // 在数组中找到下标，删除一个
        this.list.splice(index, 1)
      }
      // this.delArticle(articleId, channelId)
    })
  },
  methods: {
    // 举报文章
    // delArticle (articleId, channelId) {
    //   // 是否是当前频道：
    //   //   是：在list中找到编号是obj.articleId的数据，并删除
    //   //   否：不处理
    //   if (this.channelId !== this.channel.id) {
    //     console.log('你要删除的文章不是我这个')
    //     return
    //   }
    //   const index = this.list.findIndex(article => {
    //     return article.art_id.toString() === articleId
    //   })
    //   if (index !== -1) {
    //     // 在数组中找到下标，删除一个
    //     this.list.splice(index, 1)
    //   }
    // },
    // 举报文章
    delArticle () {
      // 通过事件总线去发布一个消息，告诉articleList组件，去删除对应的文章
      // 参数是：当前要删除的文章编号 及当前的频道编号
      // eventBus传参数
      this.$eventBus.$emit('delArticle',
        {
          articleId: this.articleId,
          channelId: this.cChannelId
        }
      )
    },
    // 点击关闭按钮，触发事件
    hClose (item) {
      // 通知父组件去显示弹层
      const articleId = item.art_id.toString()
      this.$emit('showMoreAction', articleId)
    },
    // 文章列表实现loading和finished
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }

      // 发送请求
      const res = await getArticles(this.channel.id, this.timestamp)
      console.log(res)

      this.timestamp = res.data.data.results.pre_timestamp
      const arr = res.data.data.results

      this.list.push(...arr)
      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (arr.length === 0) {
        this.finished = true
      }
    },
    // 下拉刷新
    async onRefresh () {
      // 去取回最新的文章，传入最新的时间戳
      const res = await getArticles(this.channel.id, Date.now())
      const arr = res.data.data.results
      // 把文章追加到list的头部
      this.list.push(...arr)
      this.$toast.success('刷新成功' + arr.length + '条') // 提示刷新结果
      this.isLoading = false // 结束loading的效果
    },
    // 监听滚动条
    hScroll () {
      this.scrollTop = this.$refs.refsScroll.scrollTop
    },
    // 点击图片放大
    hImage () {
      ImagePreview([
        'img'
      ])
    }
  }
}
</script>

<style scoped lang='less'>
.meta {
  display: flex;
  span{
    margin-right: 10px;
  }
  .close{
    margin-left: auto;
  }
}
</style>
